<template>
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions">
    </video-player>
</template>

<script>
	import {videoPlayer} from 'vue-video-player';
	export default {
      name: "mvdiv",
      props:{
	      src:{
	      	type:String,
            default:''
          }
      },
      data(){
			return {
				mvurl:''
            }
      },
      watch:{
      	'src'(e){
      		this.mvurl = e;
        }
      },
    components:{
        videoPlayer
    },
      computed:{
	      player() {
		      return this.$refs.videoPlayer.player
	      },
        playerOptions(){
	      	let playerOptionsObj={
              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
              autoplay: true, // 如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: true, // 导致视频一结束就重新开始。
              // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources: [{
                  type: 'video/mp4',	// 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误
                  src: this.mvurl // url地址
              }],
              poster: '', // 你的封面地址
              width: document.documentElement.clientWidth,
              height: 500,	// 设置高度，fluid需要设置成flase
              notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                  timeDivider: true,
                  durationDisplay: true,
                  remainingTimeDisplay: false,
                  fullscreenToggle: true  //全屏按钮
              }
            }
			 return playerOptionsObj

	      }
      },
      methods:{
        open(){
	      	this.isShow = true;
		},
        close(){
	        this.isShow = false;
        },
      },
	}
</script>

<style scoped>
@import "../styles/video.css";
.video-js .vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}
</style>